<template>
	<view class="page flex-col">
		<view class="box_1 ">
			<view class="section_1 flex-col">

				<view class="box_4 flex-row ">
					<!-- <image class="image_2" src="../../static/logo.png" mode=""></image> -->
					<image class="image_2" referrerpolicy="no-referrer" :src="dataInfo.image" />
					<view class="group_2 flex-col">
						<view class="text_6">{{dataInfo.activityName}}</view>
						<view class="image-text_1 flex-row justify-between">
							<image class="icon_2" src="@/static/pagesA/icon_hdsj.png" mode=""></image>

							<text class="text-group_1">
								{{dataInfo.saleStartTime}}-{{dataInfo.saleEndTime}}
							</text>
						</view>
						<view class="image-text_1 flex-row ">
							<image class="icon_2" style="width: 32rpx;height: 32rpx;;margin-right: 10rpx;"
								src="@/static/pagesA/icon_dw.png" mode="">
							</image>

							<text class="text-group_1">
								{{dataInfo.address}}
							</text>
						</view>
						<!-- 			<view class="image-text_2 flex-row justify-between">
							<image class="icon_3" src="@/static/pagesA/icon_dw.png" mode=""></image>

							<text class="text-group_2"></text>
						</view> -->
						<view class="text-wrapper_1 flex-row justify-between">
							<text class="text_7">¥{{dataInfo.price}}</text>
							<text class="text_8">剩余票量:{{dataInfo.stock}}</text>
						</view>
					</view>
				</view>
				<view class="box_5 ">
					<view class="flex-row justify-between" style="align-items: center;">
						<view class="text_9">购买数量</view>
						<view class="text_9 dis">
							<view>{{lxrArr.length}}</view>
							<view @click="numBtn"
								style="padding: 20rpx;background: #46B681;color: #FFF;margin-left: 20rpx;">+</view>
							<!-- <uni-number-box @change="numBtn" v-model="num" background="$maincolor" color="#fff" /> -->
						</view>
					</view>
					<view class=""
						v-if="dataInfo.personLimit!=0||dataInfo.personLimit!=null||dataInfo.personLimit!=undefined">
						您最多可添加{{dataInfo.personLimit}}个
					</view>


				</view>

				<view class=" listWrap" v-for="(item,index) in lxrArr" :key="index">
					<view class="text_9 flex-row justify-between" style="align-items: center;">
						<view class="">
							联系人信息
						</view>
						<view>
							<image @click="delLxr(item,index)" style="width: 30rpx;height: 30rpx;"
								src="/static/com/icon_sc.png" mode=""></image>
						</view>
					</view>
					<view class="list" :key="indexs">

						<view class="list-img">
							<image src="@/static/pagesA/icon_zbf.png" mode=""></image>

						</view>
						<view class="list-inp">
							<input v-model="item.name" placeholder="请输入姓名" />
						</view>
					</view>
					<view class="list" :key="indexs">

						<view class="list-img">
							<image src="@/static/com/icon_lxfs.png" mode=""></image>

						</view>
						<view class="list-inp">
							<input v-model="item.phone" placeholder="请输入联系电话" />
						</view>



					</view>

				</view>

				<view class="text-wrapper_3 flex-row justify-between">
					<text class="text_12">总价</text>
					<text class="text_13">¥{{allPrice||0}}</text>
				</view>
				<!-- <view class="text-wrapper_3 flex-row justify-between">
					<text class="text_12">积分抵扣金额</text>
					<text class="text_13">¥{{priceData.deductionPrice||0}}</text>
				</view> -->
				<view class="text-wrapper_3 flex-row justify-between">
					<text class="text_12">优惠券优惠金额</text>
					<text class="text_13">¥{{priceData.couponFee||0}}</text>
				</view>
				<view class="text-wrapper_3 flex-row justify-between">
					<text class="text_12">会员折扣金额
					</text>
					<text class="text_13">¥{{priceData.vipDiscountFee||0}}</text>
				</view>

				<conpotList :preOrderNo="preOrderNo" @getCountId='getCountId'></conpotList>

			</view>
			<view class="" style="height: 200rpx;">

			</view>
			<view class="section_3 flex-col">
				<button class="button_1 flex-col" @click="onClick_1">
					<text class="text_16">立即支付{{payFee||0}}元</text>
				</button>
			</view>
		</view>
		<payment :payMode='payMode' :pay_close="pay_close" types="5" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='allPrice'></payment>
	</view>
</template>
<script>
	import {
		conpotList
	} from '@/components/coupotList/index.vue'
	import {

		getUserInfo,
	} from "@/api/user";
	import payment from '@/components/payment/index.vue'
	import {
		getActivityLoadPre,
		getActivityComputedPrice,
		getActivityOrderCreate
	} from '@/api/togeterRich/index.js'
	import {
		connect
	} from 'net';
	export default {
		components: {
			payment,
			conpotList
		},
		data() {

			return {
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				allPrice: 0,
				preOrderNo: '',
				dataInfo: {},
				id: 0,
				num: 1,
				lxrArr: [{
					name: '',
					phone: ''
				}],

				constants: {},
				payFee: '',
				pay_order_id: '',
				orderNo: '',
				couponId: '',
				priceData: {}

			};
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id
			this.preOrderNo = e.preOrderNo
			this.init()
		},
		methods: {

			getCountId(e) {
				this.couponId = e
				console.log(this.couponId, 'couponIdcouponId')
			},
			payClose: function() {
				this.pay_close = false;
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			onChangeFun: function(e) {
				if (e.data == true) {
					uni.showModal({
						title: '支付成功',
						content: '支付成功',
						cancelText: "返回首页", // 取消按钮的文字  
						confirmText: "查看订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({

									url: '/pagesB/childStudy/index?status=10'
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								});
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				} else {

				}
				this.$set(this, 'pay_close', false);
				return;
				console.log(e, '这是撒很')
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},

			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})
				getActivityLoadPre(this.preOrderNo).then(res => {

					this.dataInfo = res.data.orderInfoVo
					this.payFee = this.dataInfo.payFee
					this.allPrice = this.dataInfo.proTotalFee
					this.priceData.vipDiscountFee = this.dataInfo.vipDiscountFee
				})
			},
			computedPrice() {
				let data = {
					preOrderNo: this.preOrderNo,
					productNum: this.lxrArr.length
				}
				console.log(data, 'ddddddddd')
				getActivityComputedPrice(data).then(res => {
					console.log(res, 'ds')
					this.priceData = res.data
					this.payFee = res.data.payFee
					this.allPrice = res.data.proTotalFee
				})

			},
			delLxr(item, index) {
				this.lxrArr.splice(index, 1)
				this.computedPrice()
			},
			numBtn() {

				let data = {
					name: '',
					phone: ''
				}
				if (this.lxrArr.length >= this.dataInfo.personLimit) {
					uni.showToast({
						title: '您最多只能添加' + this.dataInfo.personLimit + '个',
						icon: 'none'
					})
				} else {
					this.lxrArr.push(data)
				}
				this.computedPrice()
				console.log(this.lxrArr, 'd')
			},
			onClick_1() {
				console.log(this.lxrArr, 'this.lxrArr')
				let submiData = {
					payChannel: 'routine',
					payType: "yue",
					preOrderNo: this.preOrderNo,
					userList: this.lxrArr
				}
				console.log(submiData, 'submiData')
				getActivityOrderCreate(submiData).then(res => {
					console.log(res.data.orderNo, 'sddd')
					this.orderNo = res.data.orderNo
					this.goPay()
				})
				// 
				return;

			},
			// 去优惠券
			goPage() {
				uni.navigateTo({
					url: '/pages/users/user_coupon/index'
				})

			},
		},
	};
</script>
<style scoped lang="scss">
	.listWrap {
		padding: 30rpx;
		width: 100%;
		background: #fff;
		margin: 20rpx 0;
	}

	.list {


		height: 100rpx;
		display: flex;

		align-items: center;

		.list-inp {
			input {
				padding: 30rpx;
			}
		}

		.list-img {
			width: 44rpx;
			height: 44rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	@import 'com/pay.css';
	@import '@/com/css/common.css';
</style>